<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<!--<html lang="en">-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>选课详细信息页面</title>
</head>
<script src="/js/jquery.js"></script>
<script>
    var isTakeTheCourseDate=false;//是否到选课时间

    //通过传过来的id获取  详细信息
    function initShowCourseData() {
        /*var myCourseMap="[[${myCourseMap}]]";
        故意让他们解析不了
        var myteachers="[  ${myCourseMap.myteachers}   ]";
        var mycourse="[   ${myCourseMap.mycourse}   ]";*/
        //判断当前课程是否可选
        if("[[${ifTheSelected}]]"!=1){
            $("#takeTheCourse").attr("disabled","disabled");
        }

        var params="id=[[${id}]]";
        $.getJSON("/studentManagement/succPage/course/selCourseId",params,function (data) {
            var myteachers=data.myteachers;
            var mycourse=data.mycourse;
            /*alert(JSON.stringify(mycourse));*/
            $("#courseName").html(mycourse.name);
            $("input[name='id']").val(mycourse.id);
            $("input[name='name']").val(mycourse.name);
            $("input[name='teacherId']").val(myteachers[mycourse.teacherId].name);
            $("input[name='tution']").val(mycourse.tution);
            $("input[name='marks']").val(mycourse.marks);
            $("input[name='amount']").val(mycourse.amount);
            $("input[name='tutionDate']").val(mycourse.tutionDate);
        });

        //通过id判断是否可选在做验证  选课
    }

    //选课的点击事件
    function takeTheCourseClick(){
        if(isTakeTheCourseDate){
            var amount=$("input[name='amount']");
            var id=$("input[name='id']");
            //点击选课进入判断  是否还有数量  有的话在说课程以选完   已写

            //////////////////////////可以用websocket来判断跟新页面上的数量，然后在判断////////////////////////////////
            $.getJSON("/studentManagement/succPage/course/selCourseId2","id="+id.val(),function (data) {
                amount.val(data.amount);//更新数量
                if(data.amount<=0){
                    var order=confirm("课程数量不足是否进行预约");
                    if(order){
                        /*alert($.param(data)+"||"+JSON.stringify(data));*/
                        $.getJSON("/studentManagement/succPage/appointment/isAppointment",$.param(data),function (data1) {
                            if(data1>0){
                                alert("你已经预约过来不需要重复预约！");
                            }else{
                                $.getJSON("/studentManagement/succPage/appointment/addAppointment",$.param(data),function (data2) {
                                    if(data2>0){
                                        alert("预约成功");
                                    }
                                });
                            }
                        });
                        /*alert("预约成功");*/
                    }
                }else{/////////////////////写局部刷新提示购买成功////////////////////////
                    alert("购买成功");
                    location.href="/studentManagement/succPage/course/takeTheCourse?id="+$("input[name='id']").val();
                }
            });

        }else{
            alert("当前未到选课时间");
        }

    }

    //获取选课的时间
    function getCourseSelectionTime() {
        var tutionDate=$("input[name=tutionDate]");
        var msg=$("#msg");
        if(tutionDate.val()!="选课时间"){
            /*alert(tutionDate.val());*/
            var date=new Date();//当前时间
            var date2 = new Date(tutionDate.val());//选课那天的时间
            //我们自己给的时间会偏差  8小时
            date2.setHours(date2.getHours()-8);
            /*date2.setHours(1);*///搞上面的有问题反正数据库没日期直接1
            /*alert(date2.toLocaleString()+"||"+date.toLocaleString());*/
            /*alert(date2.toLocaleString()+"||"+date.toLocaleString());*/
            //如果是到了选课的一天
            if (date2.getFullYear()==date.getFullYear()&&date2.getMonth()==date.getMonth()&&date2.getDate()==date.getDate()){
                isTakeTheCourseDate=true;
                msg.text("当前为选课时间");
            }else if((date2.getFullYear()==date.getFullYear()&&date2.getMonth()==date.getMonth()&&date2.getDate()>date.getDate())||
                (date2.getFullYear()>date.getFullYear())||
                (date2.getFullYear()==date.getFullYear()&&date2.getMonth()>date.getMonth())) {
                isTakeTheCourseDate = false;
                var differ = date2.getTime() - date.getTime();
                /*alert(differ);*/
                var days = parseInt(differ / (1000 * 60 * 60 * 24));
                var hours = parseInt((differ % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = parseInt((differ % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = parseInt((differ % (1000 * 60)) / 1000);
                //显示  距离选课的时间
                msg.text("还有" + days + "天 " + hours + "时 "
                    + minutes + "分 " + seconds + "秒" + "到选课时间");
            }else{
                isTakeTheCourseDate=false;
                msg.text("选课时间以过");
            }
        }else{
            isTakeTheCourseDate=false;
            msg.text("xx天 xx时 xx分 xx秒");
        }
    }
    
    //选课倒计时
    function courseCountDown(){
        getCourseSelectionTime();
        setInterval(function () {
            getCourseSelectionTime();
        },1000);
    }

    $(function () {
        //初始化课程信息
        initShowCourseData();
        //选课倒计时(显示是否到选课时间)
        courseCountDown();
        //绑定选课的点击事件
        $("#takeTheCourse").click(takeTheCourseClick);
    });
</script>
<body>
<!--退出登入 等 多种页面 右上角  小按键-->
<div style="display: inline-block;float: right"
     th:insert="/succPage/public/head::header"></div>

<h3>课程<span id="courseName"></span>的详细信息列表</h3>
<div>
    <input type="hidden" name="id" value="课程id"><br/>
    课程名称：<input disabled="disabled" type="text" name="name"><br/>
    教师名称：<input disabled="disabled" type="text" name="teacherId"><br/>
    上课日期：<input disabled="disabled" type="text" name="tution"><br/>
    学分价值：<input disabled="disabled" type="text" name="marks"><br/>
    课程数量：<input disabled="disabled" type="text" name="amount"><br/>
    <input type="hidden" name="tutionDate" value="选课时间"><br/>

    <button id="takeTheCourse" >选课</button><!--th:disabled="${ifTheSelected==1}"-->
    <!--先判断ifTheSelected==-1在判断ifTheSelected==0  因为我退课也在不可选的范围之内-->
    注：<span th:text="${ifTheSelected==1?'当前课程可选':(ifTheSelected==-1?'当前课程以退课':'当前课程不可选或已选')}"></span>
    <!--<span ></span>   //th:text="${ifTheSelected==1}?'当前课程可选':${ifTheSelected==-1}?'当前课程以退课':'当前课程不可选或已选'"-->
    ;<span id="msg"></span>
</div>
<a href="/studentManagement/succPage/win">进入选课首页</a>
</body>
</html>